<template>
    <div>
        <el-card style="margin-top: 10px;">
            <div>
                
            </div>
            <el-button icon="el-icon-plus" type="primary" size="small" style="margin-bottom: 10px;" @click="openAdd()">添加流水</el-button>
            <el-dialog
              title="增加流水"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
              <el-form ref="order" :model="order" label-width="80px">
                <el-form-item label="金额">
                  <el-input v-model="order.money" style="width: 250px;"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                  <el-select v-model="order.type" placeholder="请选择流水类型">
                    <el-option label="收入" value="0"></el-option>
                    <el-option label="支出" value="1"></el-option>
                    <el-option label="欠款" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input type="textarea" v-model="order.mark" style="width: 250px;"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
              </span>
            </el-dialog>
            <el-dialog
              title="订单详细信息"
              :visible.sync="dialogVisible2"
              width="80%"
              :before-close="handleClose2">
              <el-descriptions title="订单的基础信息" direction="vertical" :column="5" border>
                <el-descriptions-item label="起始地">{{ form.start }}</el-descriptions-item>
                <el-descriptions-item label="目的地">{{ form.end }}</el-descriptions-item>
                <el-descriptions-item label="是否需要上门提货">{{ form.isCollect }}</el-descriptions-item>
                <el-descriptions-item label="提货时间">{{ form.requiredDate }}</el-descriptions-item>
                <el-descriptions-item label="货品类型">{{ form.itemType }}</el-descriptions-item>
                <el-descriptions-item label="客户单号">{{ form.customerNo }}</el-descriptions-item>
                <el-descriptions-item label="面单号">{{ form.trackingNumber }}</el-descriptions-item>
                <el-descriptions-item label="货源单号">{{ form.orderNumber }}</el-descriptions-item>
                <el-descriptions-item label="订单备注">{{ form.remark }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="发货方信息" direction="vertical" :column="5" border style="margin-top: 10px;">
                <el-descriptions-item label="名称">{{ form.shipperName }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{ form.shipperLinkMan }}</el-descriptions-item>
                <el-descriptions-item label="联系手机">{{ form.shipperPhone }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ form.shipperTelephone }}</el-descriptions-item>
                <el-descriptions-item label="客户编码">{{ form.shipperCustomerCode }}</el-descriptions-item>
                <el-descriptions-item label="合同签订主体">{{ form.shipperContractSubject }}</el-descriptions-item>
                <el-descriptions-item label="项目名称">{{ form.shipperProjectName }}</el-descriptions-item>
                <el-descriptions-item label="发货地址">{{ form.shippingAddress }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="收货方信息" direction="vertical" :column="5" border style="margin-top: 10px;">
                <el-descriptions-item label="名称">{{ form.consigneeName }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{ form.consigneeLinkMan }}</el-descriptions-item>
                <el-descriptions-item label="联系手机">{{ form.consigneePhone }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ form.consigneeTelephone }}</el-descriptions-item>
                <el-descriptions-item label="收货地址">{{ form.deliveryAddress }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="货品信息" direction="vertical" :column="12" border style="margin-top: 10px;">
                <template v-for="(item,index) in form.productData">
                    <el-descriptions-item label="货品名称" :key="index">{{ item.name }}</el-descriptions-item>
                    <el-descriptions-item label="包装" :key="index">{{ item.pack }}</el-descriptions-item>
                    <el-descriptions-item label="数量(件)" :key="index">{{ item.number }}</el-descriptions-item>
                    <el-descriptions-item label="毛重(吨)" :key="index">{{ item.grossWeight }}</el-descriptions-item>
                    <el-descriptions-item label="净重(吨)" :key="index">{{ item.netWeight }}</el-descriptions-item>
                    <el-descriptions-item label="体积(方)" :key="index">{{ item.volume }}</el-descriptions-item>
                    <el-descriptions-item label="申明价值(元)" :key="index">{{ item.claimingValue }}</el-descriptions-item>
                    <el-descriptions-item label="客户批次" :key="index">{{ item.customerBatch }}</el-descriptions-item>
                    <el-descriptions-item label="长(M)" :key="index">{{ item.length }}</el-descriptions-item>
                    <el-descriptions-item label="宽(M)" :key="index">{{ item.width }}</el-descriptions-item>
                    <el-descriptions-item label="高(M)" :key="index">{{ item.height }}</el-descriptions-item>
                    <el-descriptions-item label="备注" :key="index">{{ item.remark }}</el-descriptions-item>
                </template>
              </el-descriptions>
              <el-descriptions title="费用信息" direction="vertical" :column="5" border style="margin-top: 10px;">
                <el-descriptions-item label="运输费">{{ form.transportation }}</el-descriptions-item>
                <el-descriptions-item label="保险费">{{ form.premium }}</el-descriptions-item>
                <el-descriptions-item label="代收款">{{ form.cod }}</el-descriptions-item>
                <el-descriptions-item label="代收款费用">{{ form.collectionFee }}</el-descriptions-item>
                <el-descriptions-item label="包装费">{{ form.packing }}</el-descriptions-item>
                <el-descriptions-item label="上楼费">{{ form.upstairsFee }}</el-descriptions-item>
                <el-descriptions-item label="装赁费">{{ form.rentalFee }}</el-descriptions-item>
                <el-descriptions-item label="卸货费">{{ form.discharge }}</el-descriptions-item>
                <el-descriptions-item label="提货费">{{ form.pickChange }}</el-descriptions-item>
                <el-descriptions-item label="中转费">{{ form.interchangeFee }}</el-descriptions-item>
                <el-descriptions-item label="送货费">{{ form.deliveryFee }}</el-descriptions-item>
                <el-descriptions-item label="仓储费">{{ form.godownChange }}</el-descriptions-item>
                <el-descriptions-item label="燃油附加费">{{ form.fuelSurcharge }}</el-descriptions-item>
                <el-descriptions-item label="其他费用">{{ form.otherCharge }}</el-descriptions-item>
                <el-descriptions-item label="其他费用说明">{{ form.explain }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="付款方式" direction="vertical" :column="5" border style="margin-top: 10px;">
                <el-descriptions-item label="现付">{{ form.cashPayment }}</el-descriptions-item>
                <el-descriptions-item label="回付">{{ form.backPayment }}</el-descriptions-item>
                <el-descriptions-item label="到付">{{ form.carriageForward }}</el-descriptions-item>
                <el-descriptions-item label="周期付">{{ form.periodicPayment }}</el-descriptions-item>
                <el-descriptions-item label="预付">{{ form.advance }}</el-descriptions-item>
              </el-descriptions>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
              </span>
            </el-dialog>
            <el-table
            :row-style="{height: '0'}"
            :cell-style="{padding: '5px'}"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="money"
                  label="金额"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="mark"
                  label="备注"
                  width="550">
                </el-table-column>
                <el-table-column
                   width="100"
                  label="类型">
                  <template slot-scope="scope">
                      <el-tag type="success" v-show="scope.row.type == 0">收入</el-tag>
                      <el-tag type="warning" v-show="scope.row.type == 2">欠款</el-tag>
                      <el-tag type="danger" v-show="scope.row.type == 1">支出</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间">
                </el-table-column>
                <el-table-column
                  label="操作">
                  <template slot-scope="scope">
                      <el-button type="text" @click="openOrder(scope.row.baseId)">查看订单详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
               <el-pagination
                    style="margin-top: 10px;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import request from '../../utils/request.js'
    export default {
        data() {
          return {
            tableData: [],
            total:0,
            size:10,
            current:1,
            dialogVisible:false,
            dialogVisible2:false,
            form:{},
            order:{}
          }
        },
        methods: {
            handleSizeChange(val) {
                this.size = val;
                this.load();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.load();
            },
            handleClose() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible = false;
              })
            },
            handleClose2() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible2 = false;
              })
            },
            load() {
                request.get("/stream/getAllStream?current=" + this.current + "&size=" + this.size).then(res=>{
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            openAdd() {
                this.order = {};
                this.dialogVisible = true;
            },
            save() {
                request.post("/stream/addStream", this.order).then(res=>{
                    if (res.code == 200) {
                        this.$message.success("添加成功");
                        this.dialogVisible = false;
                        this.load();
                    }
                })
            },
            openOrder(id) {
                if (id == null) {
                    this.$message.warning("该流水为手动录入，没有订单");
                    return;
                }
                request.get("/order/getOrderInfoById?id=" + id).then(res=>{
                    if (res.code == 200) {
                        this.form = res.data;
                        this.dialogVisible2 = true;
                    }
                })
            }
        },
        mounted() {
            this.load();
        }
      }
</script>

<style>
</style>
